<template>
  <div v-loading="tableLoading">
    <!-- 筛选项 -->
    <el-row :gutter="20" class="gl_searchBox">
      <el-col :span="6" :lg="4">
        <p>审核状态</p>
        <el-select v-model="api_GET_TrainTrainningQO.ApproveStatusCode" size="mini" placeholder="请选择审核状态" filterable @change="getPageList()">
          <el-option v-for="item in dictAll.trainningApproveStatus" :key="item.code" :value="item.code" :label="item.value" />
        </el-select>
      </el-col>
      <el-col :span="6" :lg="4">
        <p>培训类型</p>
        <el-select v-model="api_GET_TrainTrainningQO.TrainningTypeId" size="mini" placeholder="请选择培训类型" filterable @change="getPageList()">
          <el-option value="" label="全部" />
          <el-option v-for="item in trainningType" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-col>
      <el-col :span="12" :lg="8">
        <p>报名时间</p>
        <el-date-picker
          v-model="filterTrainDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100%;"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          size="mini"
          @change="handleTrainTimeChange"
        />
      </el-col>
      <el-col :span="6" :lg="4">
        <p>名称</p>
        <el-input v-model="api_GET_TrainTrainningQO.Filter" placeholder="请输入名称" size="mini" clearable @change="getPageList()" />
      </el-col>
      <el-col :span="6" :lg="4" align="right" class="search_btn">
        <!-- 查询按钮 -->
        <el-button type="primary" size="mini" @click="getPageList()">{{ $t('button.query') }}</el-button>
        <!-- 重置按钮 -->
        <el-button type="warning" size="mini" @click="initForm()">{{ $t('button.Reset') }}</el-button>
      </el-col>
    </el-row>

    <!-- 培训视图 -->
    <el-row v-if="tableData.length" :gutter="15" class="game_view_list gl_mt_15">
      <el-col v-for="(item, index) in tableData" :key="index" :span="8" :lg="{span: '4-8'}" class="gl_mb_15">
        <div class="game_view_item">
          <div v-if="item.isTop" class="game_top" style="color: #696b6c;">
            <i class="el-icon-upload2" />
            已置顶
          </div>
          <div class="game_title">
            <img class="game_coverimg" :src="getStaticPhotoUrl(item.logoUrl)" alt="" @error="errorPhoto">
            <div class="game_status">
              <!-- 审核状态 -->
              <el-tag v-if="item.approveStatusCode === 'NotApproved'" effect="plain" type="success" class="gl_mr_20">{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</el-tag>
              <el-tag v-else-if="item.approveStatusCode === 'ApproveSuccess'" effect="plain" class="gl_mr_20">{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</el-tag>
              <el-tag v-else effect="plain" class="gl_mr_20">{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</el-tag>
              <!-- 培训状态 -->
              <el-tag v-if="item.statusCode === 'Entry'" effect="dark" type="success">{{ item.trainningStatus && item.trainningStatus.name }}</el-tag>
              <el-tag v-else-if="item.statusCode === 'Running'" effect="dark">{{ item.trainningStatus && item.trainningStatus.name }}</el-tag>
              <el-tag v-else effect="dark">{{ item.trainningStatus && item.trainningStatus.name }}</el-tag>
              <!-- 发布状态 -->
              <!-- <span :class="item.isPublished ? 'gl_bg_info' : 'gl_bg_grey'" class="game_status_item">
                <i :class="item.isPublished ? 'el-icon-success' : 'el-icon-error'" />
                <span class="gl_pl_5">{{ item.isPublished && '已发布' || '未发布' }}</span>
              </span> -->
            </div>
          </div>
          <div class="game_content">
            <div class="game_view_name gl_ellipsis">{{ item.name }}<i v-if="item.isDisabled" type="text" class="el-icon-remove" /></div>
            <div class="game_view_type gl_mt_10">
              培训类型：{{ item.trainningType && item.trainningType.name }}
            </div>
            <div class="game_view_seq gl_mt_10">
              报名时间：{{ item.entryStartTime && item.entryStartTime.substring(0, 10) }} 到 {{ item.entryEndTime && item.entryEndTime.substring(0, 10) }}
            </div>
            <div class="game_view_seq gl_mt_10">
              培训时间：{{ item.startTime && item.startTime.substring(0, 10) }} 到 {{ item.endTime && item.endTime.substring(0, 10) }}
            </div>
          </div>
          <div class="hover_show_message">
            <div class="game_title">
              <div class="game_view_name gl_ellipsis">{{ item.name }}<i v-if="item.isDisabled" type="text" class="el-icon-remove" /></div>
              <div class="game_view_seq gl_mt_10">
                <span class="label gl_mr_5">培训类型 </span>
                <span> {{ item.trainningType && item.trainningType.name }}</span>
              </div>
              <div class="game_view_play gl_mt_5">
                <span class="label">报名时间：</span>
                <span>{{ item.entryStartTime && item.entryStartTime.substring(0, 10) }} 到 {{ item.entryEndTime && item.entryEndTime.substring(0, 10) }}</span>
              </div>
              <div class="game_view_play gl_mt_5">
                <span class="label">培训时间：</span>
                <span>{{ item.startTime && item.startTime.substring(0, 10) }} 到 {{ item.endTime && item.endTime.substring(0, 10) }}</span>
              </div>
              <div class="game_view_play gl_mt_5">
                <span class="label">发布方：</span>
                <span>{{ item.organizationUnitDisplayName }}</span>
              </div>
            </div>
            <div class="game_content">
              <el-row class="game_status">
                <el-col :span="12" :offset="2" class="tag_text_box">
                  <!-- 审核状态 -->
                  <span v-if="item.approveStatusCode === 'NotApproved'" class="tag_text gl_mr_10 gl_color_success">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</span>
                  <span v-else-if="item.approveStatusCode === 'ApproveSuccess'" class="tag_text gl_mr_10 gl_color_info">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</span>
                  <span v-else class="tag_text gl_mr_10">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</span>
                  <!-- 查看按钮 -->
                  <!-- <img class="icon_chakan" :src="imgSrc" alt="" @click="openApproveProgress(item)"> -->
                </el-col>
                <el-col :span="10" class="tag_text_box">
                  <!-- 培训状态 -->
                  <span v-if="item.statusCode === 'Entry'" class="tag_text gl_color_info">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningStatus && item.trainningStatus.name }}</span>
                  <span v-else-if="item.statusCode === 'Running'" class="tag_text gl_color_success">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningStatus && item.trainningStatus.name }}</span>
                  <span v-else class="tag_text">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningStatus && item.trainningStatus.name }}</span>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="gl_mt_30 gl_btn_bg_F">
                <el-col v-for="jtem in gameBtnList" :key="jtem.code" :span="24" class="gl_my_5" style="text-align:center">
                  <el-button style="width:60%;padding: 10px 18px;" type="primary" @click="handleCommand(jtem.code, item)">{{ jtem.name }}</el-button>
                </el-col>
                <el-col v-if="user==='WXCenter'" class="gl_my_5" style="text-align:center">
                  <el-button v-if="item.isDisabled" style="width:60%;padding: 10px 18px;" type="success" @click="enable(item)">培训解禁</el-button>
                  <el-button v-else style="width:60%;padding: 10px 18px;" type="danger" @click="ban(item)">培训禁用</el-button>
                </el-col>
              </el-row>
            </div>
            <div v-if="!item.isTop" class="game_top gl_color_primary" @click="setTrainTop(item)">
              <i class="el-icon-upload2" />
              置顶
            </div>
            <div v-else class="game_top gl_color_warning" @click="deleteTrainTop(item)">
              <i class="el-icon-close" />
              取消置顶
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row v-else>
      <el-col :span="24" class="gl_noData_mockTable" style="line-height: 300px">
        <p>暂无数据</p>
      </el-col>
    </el-row>
    <el-row style="text-align: center;" class="gl_pb_15">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="api_GET_TrainTrainningQO.MaxResultCount"
        :current-page="api_GET_TrainTrainningQO.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>
    <approve-progress ref="approveProgress" />
    <ban ref="ban" />
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { api_PUT_ClubTAManagementDisableTrainning } from '@/extend/api/hallswaggerApi/app.js';
import { DisableTrainningInput } from '@/lib/form/hall/swaggerForm';
import ban from '../ban/index';
import defaultGameLogo from '@/assets/images/game/game_logoDefaultPhoto.png';
import { Api_GET_TrainTrainningQO } from '@/lib/form/train/swaggerForm';
import {
  api_GET_TrainTrainning,
  api_PUT_TrainTrainningIdTop,
  api_GET_TrainTrainningType
} from '@/extend/api/trainswaggerApi/app';
import auth from '@/lib/directives/auth';
import approveProgress from './approveProgress';
export default {
  components: {
    approveProgress,
    ban
  },
  directives: {
    auth
  },
  data() {
    return {
      DisableTrainningInput: new DisableTrainningInput(),
      defaultGameLogo: defaultGameLogo,
      filterTrainDate: [],
      api_GET_TrainTrainningQO: new Api_GET_TrainTrainningQO(),
      tableData: [],
      total: 0,
      tableLoading: false,
      imgSrc: require('@/assets/images/check.png'),
      trainningType: [],
      gameBtnList: [
        {
          code: 'official',
          name: '培训官网',
          isShow: true
        }
      ],
      // 勾选项
      selectionList: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      dictAll: state => state.dict.dictAll,
      currentUserType: state => state.user.currentUserType,
      user: state => state.user.info.currentOrganizationUnit.typeCode
    })
  },
  created() {
    this.getDict();
    this.initForm();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 初始化
    initForm() {
      this.api_GET_TrainTrainningQO = new Api_GET_TrainTrainningQO();
      this.api_GET_TrainTrainningQO.ApproveStatusCode = '';
      this.filterTrainDate = [];
      this.getTrainTrainningType();
      this.getPageList();
    },
    getTrainTrainningType() {
      api_GET_TrainTrainningType(this.Api_GET_TrainTrainningTypeQO).then(res => {
        this.trainningType = res.items || [];
      }, () => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        this.timeLoading = false;
      });
    },
    // 获取培训列表
    getPageList(page) {
      this.api_GET_TrainTrainningQO.IsPublished = true;
      this.api_GET_TrainTrainningQO.canEdit = false;
      this.api_GET_TrainTrainningQO.IncludeTrainningType = true;
      this.api_GET_TrainTrainningQO.IncludeTrainningStatus = true;
      this.api_GET_TrainTrainningQO.IncludeTrainningApproveStatus = true;

      this.api_GET_TrainTrainningQO.Page = page || 1;
      this.api_GET_TrainTrainningQO.SkipCount = (this.api_GET_TrainTrainningQO.Page - 1) * this.api_GET_TrainTrainningQO.MaxResultCount;
      this.tableLoading = true;
      api_GET_TrainTrainning(this.api_GET_TrainTrainningQO).then(res => {
        this.tableLoading = false;
        this.tableData = res.items || [];
        this.total = res.totalCount;
      }, () => {
        this.tableLoading = false;
        this.$message({ type: 'error', message: '获取培训列表失败！' });
      });
    },
    // 处理时间筛选项
    handleTrainTimeChange(time) {
      this.api_GET_TrainTrainningQO.EntryStartTime = time && time[0];
      this.api_GET_TrainTrainningQO.EntryEndTime = time && time[1];
      this.getPageList();
    },
    // 点击更多
    handleCommand(code, gameInfo) {
      if (gameInfo.isDisabled) {
        this.$message({ type: 'warning', message: '当前培训考试计划已被禁用，请联系平台管理员。' });
        return;
      }
      switch (code) {
        // 赛事官网
        case 'official':
          var a = document.createElement('a');
          var event = new MouseEvent('click');
          a.href = `${location.origin}/train.html#/home/${gameInfo.route + (gameInfo.tenantId ? '_' + gameInfo.tenantId : '')}/info`;
          a.target = '_blank';
          a.dispatchEvent(event);
          break;
        default:
          break;
      }
    },
    // 设置培训置顶
    setTrainTop(gameInfo) {
      this.$confirm(`您确定要置顶该培训吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true;
        api_PUT_TrainTrainningIdTop(gameInfo.id, { isTop: true }).then(() => {
          this.getPageList();
          this.$message({ type: 'success', message: '置顶成功！' });
        }, error => {
          this.tableLoading = false;
          this.$message({ type: 'error', message: '置顶失败！' + (error.error && error.error.message || '') });
        });
      }).catch(() => {});
    },
    // 取消培训置顶
    deleteTrainTop(gameInfo) {
      this.$confirm(`您确定要取消置顶该培训吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true;
        api_PUT_TrainTrainningIdTop(gameInfo.id, { isTop: false }).then(() => {
          this.getPageList();
          this.$message({ type: 'success', message: '取消置顶成功！' });
        }, error => {
          this.tableLoading = false;
          this.$message({ type: 'error', message: '取消置顶失败！' + (error.error && error.error.message || '') });
        });
      }).catch(() => {});
    },
    // 查看审核进度
    openApproveProgress(row) {
      this.$refs.approveProgress.open(row);
    },
    // 获取图片地址
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultGameLogo;
    },
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.api_GET_TrainTrainningQO.MaxResultCount = pagesize;
      this.getPageList();
    },
    // 禁用
    ban(row) {
      this.$refs.ban.DisableTrainningInput.isDisabled = true;
      this.$refs.ban.DisableTrainningInput.trainningId = row.id;
      this.$refs.ban.dialogVisible = true;
    },
    // 启用
    enable(row) {
      this.tableLoading = true;
      this.DisableTrainningInput.isDisabled = false;
      this.DisableTrainningInput.trainningId = row.id;
      api_PUT_ClubTAManagementDisableTrainning(this.DisableTrainningInput).then(res => {
        this.tableLoading = false;
        this.$message({
          type: 'success',
          message: '解禁成功'
        });
        this.getPageList();
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    }
  }
};
</script>
<style scoped>
.change_game_icon {
  height: 28px;
  line-height: 32px;
}
.change_game_icon .icon_change {
  font-size: 18px;
  width: 24px;
  height: 24px;
  visibility: visible;
  color: #696b6c;
  cursor: pointer;
}
.change_game_icon .icon_change:hover {
  color: #1890ff;
}
.game_table_list .game_coverimg {
  max-width: 74px;
  max-height: 74px;
  border-radius: 50%;
  vertical-align: middle;
}
.dropdown_item {
  margin: 0 -20px;
  padding: 0 20px;
}
.game_view_list{
  padding: 0 2px;
}
.game_view_item {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.10);
  overflow: hidden;
}
.game_view_item .game_top {
  position: absolute;
  width: 80px;
  height: 16px;
  top: 11px;
  right: 9px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
}
.game_view_item .game_title {
  width: 100%;
  text-align: center;
  padding: 32px 0 0px;
  height: 210px;
  box-sizing: border-box;
}
.game_view_item .game_status_item {
  padding: 3px 8px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.game_view_item .game_coverimg {
  max-width: 90px;
  max-height: 9 15px0px;
  border-radius: 50%;
  margin: 0px 0 40px;
}
.game_view_item .game_content {
  width: 100%;
  height: 100%;
  padding: 12px 16px;
  font-size: 14px;
  color: #828282;
  background: #e8f4ff;
}
.game_view_item .game_view_name {
  font-size: 16px;
  color: #000;
}
.game_view_item .hover_show_message {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.hover_show_message .game_top {
  position: absolute;
  width: 80px;
  height: 16px;
  top: 11px;
  right: 9px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.game_view_item:hover .hover_show_message {
  top: 0;
}
.hover_show_message .game_title {
    background: rgba(0,0,0,0.58);
    opacity: 0.9;
    font-size: 14px;
    height: 160px;
    color: #fff;
    padding: 25px 0 0px;
}
.hover_show_message .game_view_name {
  color: #fff;
}
.hover_show_message .game_content {
  background: #f5f5f5;
}
.hover_show_message .game_content .game_status {
  text-align: center;
  margin-top: 5px;
}
.hover_show_message .game_content .game_status .icon_chakan{
  vertical-align: middle;
  color: #FFBA00;
  /* margin-right: 90px; */
  font-size: 22px;
  cursor: pointer;
}
.hover_show_message .game_content .game_status .icon_chakan{
    vertical-align: middle;
    cursor: pointer;
    width: 20px;
}
.game_view_play{
  width: 251px;
  margin: 8px auto 0;
  text-align: left;
}
.game_view_play span{
  display: inline-block;
}
.game_view_play .label{
  width: 70px;
  text-align: right;
}
.el-col-lg-4-8 {
  width: 20%;
}
</style>
